<template>
	<div>
		<div class="specs-border">
			<div v-if="spuSpecs && spuSpecs.length > 0">
				<div v-for="(item, index) in spuSpecs" :key="index">
					<div class="goods-specs-item">
						规格名：
						<el-select
							v-model="item.specsId"
							filterable
							allow-create
							placeholder="请输入规格名"
							@visible-change="visibleChange(item)"
							@change="changeSpecs(item, index)"
						>
							<el-option v-for="item in specsList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.disabled" />
						</el-select>
						<div style="float: right">
							<el-button circle @click="delSpecs(item, index)"
								><el-icon style="margin-right: 0px"> <ele-CloseBold /> </el-icon
							></el-button>
						</div>
					</div>

					<div class="specs-value-list">
						规格值：
						<div v-for="(itemValue, indexValue) in item.goodsSkuSpecsValues" :key="indexValue">
							<el-tag style="margin: 10px" effect="plain" closable @close="delSpecsValue(indexValue, index)">{{ itemValue.specsValueName }}</el-tag>
							<select-material class="specs-image" v-if="index == 0" v-model="itemValue.picUrls" :canChooseImagesNum="1"></select-material>
						</div>

						<el-popover placement="bottom" :width="200" trigger="click">
							<el-select
								v-model="state.specsValueId"
								filterable
								allow-create
								placeholder="请输入规格值"
								@change="changeSpecsValue(state.specsValueId, index)"
							>
								<el-option
									v-for="specsValueOption in state.specsValueList"
									:key="specsValueOption.id"
									:label="specsValueOption.name"
									:value="specsValueOption.id"
									:disabled="specsValueOption.disabled"
								/>
							</el-select>
							<template #reference>
								<el-button type="primary" link @click="addSpecsValue(item.specsId, index)" v-if="item.specsId">添加规格值</el-button>
							</template>
						</el-popover>
					</div>
				</div>
			</div>
			<el-button @click="addSpecs" v-if="spuSpecs.length < 3">添加规格</el-button>
		</div>
		<div style="margin-top: 20px">
			<SkuTable ref="skuTable" :skusData="skusData" :goodsSpuSpecs="spuSpecs" @getGoodsSkus="getGoodsSkus"> </SkuTable>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { getList as getSpecsValueList, addObj as addSpecsValueObj } from '/@/api/product/goodsspecsvalue';
import SelectMaterial from '/@/components/selectMaterial/index.vue';
import SkuTable from './skuTable/index.vue';
import { addObj as addSpecsObj } from '/@/api/product/goodsspecs';
const emit = defineEmits(['getGoodsSkus']);

const props = defineProps({
	specsListProp: {
		type: Object,
		default: () => {},
	},
	skusData: {
		type: Array,
		default: () => [],
	},
	goodsSpuSpecs: {
		type: Array,
		default: () => [],
	},
});
const state = reactive({
	specsValueId: null,
	specsValueList: [{ id: '', name: '', disabled: false }],
	visible: true,
});
const spuSpecs = ref<any>(props.goodsSpuSpecs);
const specsList = ref<any>(props.specsListProp);
const getGoodsSkus = (skus: any) => {
	emit('getGoodsSkus', skus, spuSpecs.value);
};

// 监听goodsSpuSpecs
watch(
	() => props.goodsSpuSpecs,
	(val) => {
		spuSpecs.value = val;
	},
	{ deep: true, immediate: true }
);
// 监听specsListProp
watch(
	() => props.specsListProp,
	(val) => {
		specsList.value = val;
		//
	},
	{ deep: true }
);

/**
 * 添加规格
 */
const addSpecs = () => {
	specsList.value.forEach(function (item: any) {
		spuSpecs.value.forEach(function (item2: any) {
			if (item.id == item2.specsId) {
				item.disabled = true;
			} else {
				item.disabled = false;
			}
		});
	});
	spuSpecs.value.push({
		specsId: '',
		specsName: '',
		goodsSkuSpecsValues: [],
	});
};
/**
 * 添加规格值
 */
const addSpecsValue = (specsId: string, index: number) => {
	// 查询规格值
	getSpecsValueList({ specsId: specsId }).then((response) => {
		state.specsValueList = response.data.data;
		state.specsValueList.forEach(function (item: any) {
			spuSpecs.value[index].goodsSkuSpecsValues.forEach(function (valueItem: any) {
				if (valueItem.specsValueId == item.id) {
					item.disabled = true;
				}
			});
		});
	});
};
/**
 * 选择规格事件
 */
const changeSpecs = (row: any, index: number) => {
	let isNew = true;
	specsList.value.forEach(function (item: any) {
		if (item.id == row.specsId) {
			isNew = false;
			spuSpecs.value[index].specsName = item.name;
		}
	});

	// 新增
	if (isNew) {
		addSpecsObj({ name: row.specsId }).then((res) => {
			let specsObj = res.data.data;
			specsList.value.push(specsObj);
			spuSpecs.value[index].specsName = specsObj.name;
			spuSpecs.value[index].specsId = specsObj.id;
		});
	}
	// 清空规格值
	spuSpecs.value[index].goodsSkuSpecsValues = [];
};
/**
 * 选择规格值事件
 */
const changeSpecsValue = (specsValueId: string | null, index: number) => {
	let isNew = true;
	state.specsValueList.forEach(function (item: any) {
		if (item.id == specsValueId) {
			isNew = false;
			item.disabled = true;
			spuSpecs.value[index].goodsSkuSpecsValues.push({
				specsValueId: item.id,
				specsValueName: item.name,
				picUrls: [],
			});
		}
	});
	// 新增
	if (isNew) {
		addSpecsValueObj({
			name: specsValueId,
			specsId: spuSpecs.value[index].specsId,
		}).then((res) => {
			let specsObj = res.data.data;
			spuSpecs.value[index].goodsSkuSpecsValues.push({
				specsValueId: specsObj.id,
				specsValueName: specsObj.name,
				picUrls: [],
			});
		});
	}
	state.specsValueId = null;
};
/**
 * 删除规格
 */
const delSpecs = (row: any, index: number) => {
	specsList.value.forEach(function (item: any) {
		if (item.id == row.specsId) {
			item.disabled = false;
		}
	});
	spuSpecs.value.splice(index, 1);
};
/**
 * 删除规格值
 */
const delSpecsValue = (index: number, specsIndex: number) => {
	spuSpecs.value[specsIndex].goodsSkuSpecsValues.splice(index, 1);
};
const visibleChange = (val: any) => {
	if (val) {
		specsList.value.forEach(function (item: any) {
			item.disabled = false;
			spuSpecs.value.forEach(function (item2: any) {
				if (item.id == item2.specsId) {
					item.disabled = true;
				}
			});
		});
	}
};
</script>
<style lang="scss" scoped>
.specs-border {
	border: 1px solid var(--next-color-danger-lighter);
	padding: 20px;
}

.specs-value-select {
	padding: 10px;
	width: 100px;
}

.specs-value-list {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--el-text-color-regular);
}

.goods-specs-item {
	background-color: var(--next-bg-main-color);
	color: var(--el-text-color-regular);
	padding: 20px;
}

.specs-image {
	display: flex;
	justify-content: center;
	margin-right: 0px;
}
</style>
